<template>
  <div class="modify-dialog">
    <slot>
      <el-button size="small" type="primary" @click="showDialog()">
        订单出库
      </el-button>
    </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <Form v-bind="formOpts" v-on="formEvent">
        <template #formBtn>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
          </div>
        </template>
      </Form>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
export default {
  mixins: [modifyMixins],
  data() {
    return {
      form: {
        type: {
          tag: "el-select",
          label: "出库类型",
          value: "",
          items: [
            { label: "报货", value: "sale" },
            { label: "调货", value: "transfer" },
            { label: "售后", value: "afterSale" },
          ],
          props: {
            clearable: true,
            filterable: true,
          },
        },
        targetId: {
          tag: "el-select",
          label: "订单",
          value: "",
          items: [],
          props: {
            clearable: true,
            filterable: true,
          },
        },
      },
    };
  },
  watch: {
    "form.type.value": function (value) {
      const api = {
        sale: "saleSaleList",
        transfer: "materialTransferMaterialTransferList",
        afterSale: "afterSaleAfterSaleList",
      };
      this.form.targetId.value = "";
      this.form.targetId.items = [];
      if (value) {
        this.$api[api[value]]({ pageSize: 10000 ,pageNumber:1}).then((res) => {
          this.form.targetId.items = (res?.rows || []).map((e) => ({
            label: e.orderName || e.saleId || e.transferId || e.afterSaleId,
            value: e.saleId || e.transferId || e.afterSaleId,
          }));
        });
        this.formKey = this.$quinn.guid();
      }
    },
  },
  methods: {
    onSubmit(form) {
      const { modify, row } = this;
      if (modify === "add")
        this.$api["inOutOut"](form).then(this.submitDoneMsg);
    },
  },
};
</script>

<style lang="less" scoped></style>
